<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-form :model="courseForm" label-width="80px" :rules="courseRules" ref="courseForm">
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="courseForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="适用人群" prop="users">
        <el-input type="textarea" v-model="courseForm.users" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="课程分类" prop="categoryActive"  v-loading="categoryLoading">
        <el-cascader
          expand-trigger="hover"
          :options="categoryList"
          v-model="courseForm.categoryActive"
          :props="props">
        </el-cascader>
      </el-form-item>
      <el-form-item label="课程等级" prop="grade" v-loading="gradeLoading">
        <b v-for="grade in gradeList">
          <el-radio v-model="courseForm.grade" :label="grade.sdId">{{grade.sdName}}</el-radio>&nbsp;&nbsp;
        </b>
      </el-form-item>
      <el-form-item label="学习模式" prop="studymodel" v-loading="studymodelLoading">
        <b v-for="studymodel_v in studymodelList">
          <el-radio v-model="courseForm.studymodel" :label="studymodel_v.sdId">{{studymodel_v.sdName}}</el-radio>&nbsp;&nbsp;
        </b>

      </el-form-item>

      <el-form-item label="课程介绍" prop="description">
        <el-input type="textarea" v-model="courseForm.description"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click.native="save" :loading="submitLoading">提交</el-button>
    </div>
  </div>
</template>
<script>

  import * as courseApi from '../api/course';
  import * as systemApi from '../../../base/api/system';
  import { Loading } from 'element-ui';

  export default {

    data() {
      return {
        categoryLoading: true,
        fullscreenLoading: false,
        gradeLoading: true,
        studymodelLoading: true,
        submitLoading: true,
        studymodelList: [],
        gradeList: [],
        props: {
          value: 'id',
          label: 'name',
          children: 'children'
        },
        categoryList: [],

        courseForm: {
          id: '',
          name: '',
          users: '',
          grade: '',
          studymodel: '',
          mt: '',
          st: '',
          description: '',
          categoryActive: [],
        },
        courseRules: {
          name: [
            {required: true, message: '请输入课程名', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1到 20 个字符', trigger: 'blur'}
          ],
          users: [
            {required: true, message: '请输入适用人群', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1到 20 个字符', trigger: 'blur'}
          ],
          categoryActive: [
            {required: true, message: '请选择课程分类', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '请选择课程等级', trigger: 'change'}
          ],
          studymodel: [
            {required: true, message: '请选择学习模式', trigger: 'change'}
          ],
          description: [
            {required: true, message: '请输入课程介绍', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      //新增课程提交
      save() {
        this.fullscreenLoading = false
        // 校验数据是否填写完毕
        this.$refs['courseForm'].validate((valid) => {
          if (valid) {
            //处理课程分类
            // 选择课程分类存储到categoryActive
            this.courseForm.mt = this.courseForm.categoryActive[0]//大分类
            this.courseForm.st = this.courseForm.categoryActive[1]//小分类
            this.fullscreenLoading = true;
            courseApi.addCourseBase(this.courseForm).then(res => {
              if (res.success) {
                this.fullscreenLoading = false;
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                //跳转到我的课程
                this.$router.push({path: '/course/list'})
              } else {
                this.fullscreenLoading=false;
                this.$message.error(res.message);
              }
              this.fullscreenLoading=false;
            }).catch(error => {
              this.fullscreenLoading=false;
              this.$message.error("网络超时");
            })
          } else {
            return false;
          }

        });
      }
    },
    mounted() {
      // 查询课程分类
      courseApi.category_findlist().then(res => {
        this.categoryList = res.children;
        this.categoryLoading= false;
        if (this.gradeLoading===false && this.studymodelLoading ===false){
          this.submitLoading = false;
        }
      })
      //查询数据字典
      //查询课程等级
      systemApi.sys_getDictionary("200").then(res => {
        this.gradeList = res.dvalue;
        this.gradeLoading = false;
        if (this.studymodelLoading === false && this.categoryLoading===false){
          this.submitLoading = false;
        }
      })
      //查询学习模式
      systemApi.sys_getDictionary("201").then(res => {
        this.studymodelList = res.dvalue;
        this.studymodelLoading = false;
        if (this.categoryLoading === false && this.gradeLoading === false){
          this.submitLoading = false
        }
      })
      if (this.studymodelLoading === false && this.categoryLoading===false && this.gradeLoading ===false){
        this.submitLoading = false
      }
    },
  }
</script>
<style>
  /*@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");*/

</style>

